<template>
  <div class="cpu-liquidfill-container">
    <div ref="chartRef" class="chart-container"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, onUnmounted } from 'vue';
import * as echarts from 'echarts';
import 'echarts-liquidfill'; // 引入水球图扩展

// 接收父组件的自定义参数
const props = defineProps({
  // 数值（0-1之间，示例为 0.75）
  value: {
    type: Number,
    default: 0.75,
    validator: (val) => val >= 0 && val <= 1
  },
  // 水球颜色（支持单颜色/颜色数组，示例为青绿色）
  waveColors: {
    type: [String, Array],
    default: () => ['rgba(26, 188, 156, 0.9)']
  },
  // 外层边框颜色（默认蓝色）
  outerBorderColor: {
    type: String,
    default: 'rgba(141, 128, 185, 0.9)'
  },
  // 内层边框颜色（默认粉色）
  innerBorderColor: {
    type: String,
    default: 'rgba(236, 230, 140, 0.9)'
  },
  // 图表背景色
  backgroundColor: {
    type: String,
    default: '#1c2833'
  }
});

const chartRef = ref(null);
let chartInstance = null;

// 初始化/更新图表
const initChart = () => {
  // 销毁旧实例（避免内存泄漏）
  if (chartInstance) chartInstance.dispose();
  chartInstance = echarts.init(chartRef.value);

  // 水球波浪数量（示例视觉约 3 个波浪，故设为 3）
  const data = Array(3).fill(props.value);
  // 统一颜色格式为数组
  const colors = Array.isArray(props.waveColors) ? props.waveColors : [props.waveColors];

  const option = {
    backgroundColor: props.backgroundColor,
    title: { show: false }, // 隐藏标题（示例无标题）
    series: [
      // ---------- 外层边框（用 pie 系列实现） ----------
      {
        type: 'pie',
        radius: ['90%', '95%'], // 控制外层边框的“宽度”和位置
        center: ['50%', '50%'], // 与水球居中对齐
        data: [{ 
          value: 1, 
          itemStyle: { color: props.outerBorderColor } 
        }],
        label: { show: false }, // 隐藏标签
        labelLine: { show: false }, // 隐藏标签线
        hoverAnimation: false // 禁用 hover 动画
      },
      // ---------- 水球 + 内层边框（用 liquidFill 系列实现） ----------
      {
        type: 'liquidFill',
        radius: '85%', // 水球半径（需比外层 pie 小，避免重叠）
        center: ['50%', '50%'], // 与外层 pie 居中对齐
        data: data,
        color: colors, // 水球波浪颜色
        backgroundStyle: {
          borderWidth: 8, // 内层边框宽度
          borderColor: props.innerBorderColor, // 内层边框颜色
          color: 'rgba(26, 188, 156, 0.05)' // 水球背景色（弱透明更协调）
        },
        label: {
          normal: {
            formatter: `${(props.value * 100).toFixed(2)}%`,
            textStyle: {
              fontSize: 48,
              fontWeight: 'bold', // 字体加粗，匹配示例视觉
              color: '#ffffff'
            }
          }
        },
        outline: { show: false } // 隐藏默认外轮廓（避免干扰）
      }
    ]
  };

  chartInstance.setOption(option);
};

// 窗口 resize 时自适应
const handleResize = () => chartInstance && chartInstance.resize();

onMounted(() => {
  initChart();
  window.addEventListener('resize', handleResize);
});

// 监听属性变化，自动更新图表
watch([
  () => props.value,
  () => props.waveColors,
  () => props.outerBorderColor,
  () => props.innerBorderColor,
  () => props.backgroundColor
], initChart);

onUnmounted(() => {
  if (chartInstance) {
    chartInstance.dispose();
    chartInstance = null;
  }
  window.removeEventListener('resize', handleResize);
});
</script>

<style scoped>
.cpu-liquidfill-container {
  width: 100%;
  height: 100%;
}

.chart-container {
  width: 100%;
  height: 100%;
}
</style>